<!--
 * @Description: 用户管理
 * @Author: qingyang
 * @Date: 2022-01-10 16:04:17
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-11 16:38:15
-->
<template>
  <div class="user-list-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <el-button type="primary" @click="addTask" v-btnPermission="'SUPPLIER_USER_ADD'"
          ><CIcon class="g-mr4" type="c-xian-xinjian"></CIcon>新增</el-button
        >
      </template>
      <template #realNameSlot="{ scope }">
        <!-- <i class="round">{{ scope.row?.realName[0] }}</i -->
        <CAvatar class="g-mr10" size="small" style="background: #028968">{{
          scope.row?.realName[0]
        }}</CAvatar>
        <span>{{ empty(scope.row.realName) }}</span>
      </template>
      <template #creatorSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.creator"
          :sub-text="scope.row.createTime"
        ></CTableColumn>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <AddOrEditUserDialog
      v-model:visible="addOrEditTaskVisible"
      :info="infoDetail"
      @refresh="handleRefresh"
    ></AddOrEditUserDialog>
  </div>
</template>
<script lang="ts" setup name="SystemUserList">
import { reactive, ref } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { useFactorList } from './useUserList';
import { empty } from '@/utils/index';
import AddOrEditUserDialog from './components/AddOrEditUserDialog/index.vue';
import Detail from './components/detail/index.vue';
import { useMessage } from '@/hooks/useMessage';
import { CAvatar } from '@/components/CAvatar/index';
import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { delSupplierUser } from '@/apis/system/config/supplier';
import { IUser } from '@/apis/system/config/model/supplierModel';
import { useRoute } from 'vue-router';
const { createConfirm, createMessage } = useMessage();
const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useFactorList();
const addOrEditTaskVisible = ref(false);
const detailVisible = ref(false);
const infoDetail = ref<IUser>();
const route = useRoute();
const options = reactive<CPageTableProps>({
  title: (route.query.supplierName as string) || '管理用户',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true,
  isShowSearchBar: false
});

const [registerPage, { refresh }] = useCPageTable(options);

const tdot = (row: IUser) => {
  infoDetail.value = row;
  detailVisible.value = true;
};

const edit = (row: IUser) => {
  infoDetail.value = row;
  addOrEditTaskVisible.value = true;
};

const addTask = () => {
  infoDetail.value = undefined;
  addOrEditTaskVisible.value = true;
};

const handleRefresh = () => {
  refresh();
};
const dlt = (item: IUser) => {
  createConfirm('提示', '确认删除该用户？', {
    iconType: 'warning',
    confirmButtonText: '删除'
  }).then(async () => {
    delSupplierUser(item.userId).then(() => {
      createMessage.success('删除用户成功！');
      refresh();
    });
  });
};

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: IUser): TableButtonItem[] {
  return [
    {
      text: '编辑',
      btnPermission: 'SUPPLIER_USER_EDIT',
      onClick: () => edit(row)
    },
    {
      text: '删除',
      btnPermission: 'SUPPLIER_USER_DELETE',
      onClick: () => dlt(row)
    }
  ];
}
</script>

<style lang="scss" scoped>
.user-list-container {
  min-height: 80%;
}
.round {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #51596c;
  color: #fff;
  line-height: 28px;
  text-align: center;
  font-style: normal;
  margin-right: 10px;
}
</style>
